<template>
    <Layout>  
        <Table ref='table' :loading="buttonLoading" stripe border no-data-text="没有查询到相关数据!" :height="tableHeight" :columns="columns3" :data="data1" size="small"></Table>
        <Page :total="pagedata.total"  @on-change="pageChange" @on-page-size-change="pageSizeChange" :current="pagedata.fromPage" :page-size="pagedata.pageSize"
                show-total show-sizer show-elevator>
        </Page>
        <Modal v-model="modal2" title="分配人员">
            <Tree ref="tree2" :data="paramsdatacopy"  :load-data="loadData" show-checkbox></Tree>
            <div slot="footer">
                <Button class='ivu-btn-save' @click="makeSure2()" >确定</Button>
                <Button type="text"  class='ivu-btn-cancel'  @click="cancel2" >取消</Button>
            </div>
        </Modal>
        <Modal v-model="modal3" :styles="{top: '20px'}"  :title="RoleModalTitle">
            <Form :model="formItem" :label-width="140" >
                <FormItem label="角色名称：">
                    <Input v-model="formItem.name"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button class='ivu-btn-save' @click="saveRole()" >确定</Button>
                <Button type="text"  class='ivu-btn-cancel'  @click="modal3 = false" >取消</Button>
            </div>
        </Modal>
        <Modal v-model="modal" title="查看电脑端功能" :styles="{height:'500px'}" class-name='limit-height-dialog'>
            <Tree ref="menuTree" :data="menuTree"  show-checkbox multiple ></Tree>
            <div slot="footer">
                <Button class='ivu-btn-save' @click="saveMenus()" >确定</Button>
                <Button type="text"  class='ivu-btn-cancel'  @click="cancelMenu" >取消</Button>
            </div>
        </Modal>
        <Modal v-model="mobileModal" title="查看移动端功能" :styles="{height:'500px'}" class-name='limit-height-dialog'>
            <Tree disabled="true" ref="mobileMenuTree" :data="mobileMenuTree"  show-checkbox multiple></Tree>
            <div slot="footer">
                <Button class='ivu-btn-save' @click="saveMobileMenus()" >确定</Button>
                <Button type="text"  class='ivu-btn-cancel'  @click="cancel" >取消</Button>
            </div>
        </Modal>
        <Modal title="已分配人员" :transfer=true footer-hide v-model="userInRoleListModal"  :width=1000>
            <UserInRoleList  ref="userInRole" :listData="listData" :userInRoleLoading="userInRoleLoading" 
                 :companyId="companyId"  :roleId="roleId" :totalNum="totalNum">
            </UserInRoleList>
        </Modal>
    </Layout>
</template>

<script>

    import {Api} from '../../../api/index.js'
    import UserInRoleList from './userInRoleList.vue'
    import {sessionStorage} from '@/common/cacheUtils.js'

    export default {
        components: {
            UserInRoleList
        },
        data() {
            return {
                totalNum : 0,
                roleId : '',
                companyId: '',
                userInRoleLoading:false,
                userInRoleListModal: false,
                listData : [],
                tableHeight:450,
                RoleModalTitle:"新增",
                currentRoleId:"",
                mobileMenu:false,
                selectNode: {}, //节点信息
                selectNodeInfo:{},
                selectRoot:{},
                menuTree:[{
                    menuId   : '100',
                    loading: true,
                    menuName : '菜单',
                    title: '菜单',
                    expand: true,
                    disabled:true,
                    children: []
                }],
                mobileMenuTree:[{
                    menuId   : '100',
                    loading: true,
                    menuName : '菜单',
                    title: '菜单',
                    disabled:true,
                    expand: true,
                    children: []
                }],
                modal:false,
                mobileModal:false,
                modal2:false,
                modal3:false,
                paramsdatacopy:[
                    {
                        title:'人员',
                        loading: true,
                        expand: true,
                        children: []
                    }
                ],
                formItem: {
                    name: "",
                    id:""
                },
                pagedata: {
                    total: 0, //总条数
                    fromPage: 1,//从n条开始
                    pageSize: 10//每页多少条
                },
                buttonLoading:false,
                tage: false,
                columns3: [{
                    title: '序号',
                    // type: 'index',
                    width: 70,
                    align: 'center',
                    render: (h, params) => {
                        return h('span', params.index + (this.pagedata.fromPage - 1) * this.pagedata.pageSize + 1);
                    }
                },
                {
                    title: '角色名称',
                    width: 250,
                    align: "center",
                    key: 'name'
                },
                {
                        title: '角色级别',
                        width: 250,
                        align: "center",
                        render: (h, params) => {
                            return h('span', params.row.roleType === '1'? '集团公司级' :params.row.roleType === '2' ? '二级集团级':'公司级' );
                        }
                },
                {
                    title: '查看电脑端功能',
                    align: "center",
                    key: 'menu',
                    expand:true,
                    render:(h,params)=>{
                        return h('div',[
                                h('A', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    fontSize: '14px',
                                    color: (this.currentRoleType > params.row.roleType) ? '#d0d0d0':'red',
                                    pointerEvents:  (this.currentRoleType > params.row.roleType) ? 'none':''
                                },
                                on:{
                                    click:() => {
                                        this.currentRoleId = this.data1[params.index].id;
                                        this.mobileMenu = false;
                                        this.getMenusByParentId('100');
                                        this.modal = true;
                                    }
                                }
                            },"查看")
                        ])
                    }
                },
                {
                    title: '查看移动端功能',
                    align: "center",
                    key: 'menu',
                    expand:true,
                    render:(h,params)=>{
                        return h('div',[
                            h('A', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    fontSize: '14px',
                                    color: (this.currentRoleType > params.row.roleType) ? '#d0d0d0':'red',
                                    pointerEvents:  (this.currentRoleType > params.row.roleType) ? 'none':''
                                },
                                on:{
                                    click:() => {
                                        this.currentRoleId = this.data1[params.index].id;
                                        this.mobileMenu = true;
                                        this.getMenusByParentId('100');
                                        this.mobileModal = true;
                                    }
                                }
                            },"查看")
                        ])
                    }
                },
                {
                    title: '分配人员',
                    key: 'role',
                    align: "center",
                    render:(h,params)=>{
                        return h('div',[
                                h('A', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    fontSize: '14px',
                                    color: 'red'
                                },
                                on:{
                                    click:() => {
                                        this.currentRoleId = this.data1[params.index].id;
                                        this.roleId = this.data1[params.index].id;
                                        this.userInRoleListModal = true;
                                        this.$refs.userInRole.resetPage();
                                        this.queryUsers(this.roleId);
                                    }
                                }
                            },"维护")
                        ])
                    }
                }
                ],
                data1: [{
                    name:"管理员",
                    id:1
                }
                ]
            }
        },
        mounted: function() {
            this.tableHeight = window.innerHeight - this.$refs.table.$el.parentNode.offsetTop-10 - 180;
            this.companyId = sessionStorage('userId').getObject('userId').companyId;
            this.query()
        },
        methods: {
            queryUsers(roleId){
                this.userInRoleLoading = true;
                let  data = {};
                data.fromPage = 1;
                data.pageSize = 10;
                data.roleId = roleId;
                data.orgId = this.companyId;
                data.userName = '';
                this.$http.get(Api.queryUserInRole, {params : data}).then(res => {
                    res.data.data.map(i=>{
                        if(i.orgInfo != null) {
                            i.orgName = i.orgInfo.orgName;
                        }
                    });
                    this.listData = res.data.data;
                    this.roleId = roleId;
                    this.totalNum = res.data.total;
                    this.userInRoleLoading = false;
                }).catch(e => {
                    this.userInRoleLoading = false;
                    //this.$Message.error('请求失败');
                })
            },
            pageChange(data){
                this.pagedata.fromPage = data;
                this.query();
            },
            pageSizeChange(size){
                this.pagedata.pageSize = size;
                this.query();
            },
            cancel(){
                this.mobileModal = false;
                this.menuTree=[{
                menuId   : '100',
                menuName : '菜单',
                title: '菜单',
                expand: true,
                disabled:true,
                children: []
            }]},
            cancelMenu(){
                this.modal = false;
                this.menuTree=[{
                menuId   : '100',
                menuName : '菜单',
                title: '菜单',
                disabled:true,
                expand: true,
                children: []
            }]},
             getMenusByParentId(parentMenuId){
                let url = "";
                if(this.mobileMenu == false){
                    this.menuTree=[
                      { menuId   : '100',
                        loading: true,
                        menuName : '菜单',
                        title: '菜单',
                        expand: true,
                        children: []}
                    ],
                    this.menuTree[0].children =[]
                    url = Api.queryRoleMenu + "/" + this.currentRoleId;
                    this.$http.get(url,{params:{parentMenuId : parentMenuId,orgId:sessionStorage('userId').getObject('userId').companyId}}).then(res => {
                        res.data.data.map(i=>{
                            i.disabled=true
                            if (i.children!=null){
                                i.checked=false
                                i.disabled=true
                                i.children.map(ii=>{
                                    ii.disabled=true
                                    if (ii.children!=null){
                                        ii.checked=false
                                        ii.disabled=true
                                        ii.children.map(iii=>{
                                            iii.disabled=true
                                            if (iii.children!=null){
                                                iii.checked=false
                                                iii.disabled=true
                                                iii.children.map(iiii=>{
                                                    iiii.disabled=true
                                                    if (iiii.children!=null){
                                                        iiii.checked=false
                                                        iiii.disabled=true
                                                        iiii.children.map(iiiii=>{
                                                            iiiii.checked=false
                                                            iiiii.disabled=true
                                                            iiiii.disabled=true
                                                            if (iiiii.funcs!=null){
                                                                iiiii.children = [];
                                                                iiiii.disabled=true
                                                                iiiii.funcs.map(func=>{
                                                                    func.title = func.funcName;
                                                                    iiiii.children.push(func);
                                                                })
                                                            }
                                                        })
                                                    }
                                                })
                                            }
                                        })
                                    }
                                })
                            }
                        });
                    this.menuTree[0].children = res.data.data;
                    this.menuTree[0].loading = false;
                    }).catch(e => {
                    this.$Message.error('请求失败');
                    })
                }
                else{
                    url = Api.queryRoleMobileMenu + "/" + this.currentRoleId;
                    this.$http.get(url,{params:{parentMenuId : parentMenuId}}).then(res => {
                    res.data.data.map(i=>{
                        if (i.children!=null){
                            i.disabled=true
                            i.children.map(ii=>{
                                if (ii.children!=null){
                                    ii.disabled=true
                                    ii.children.map(iii=>{
                                        iii.children = [];
                                  })
                                }
                            })
                        }
                    });
                    this.mobileMenuTree[0].children = res.data.data;
                    this.mobileMenuTree[0].loading = false;
                }).catch(e => {
                    this.$Message.error('请求失败');
                })
                }
            },
            makeSure2(){
                var data = "";
                this.$refs.tree2.getCheckedAndIndeterminateNodes().forEach(item=>{
                    if(item.type=="user")
                        data = data  + item.userId + ","
                })
                var menusData={}
                menusData.usersId = data
                this.$http.post(Api.baseUrl + "/role/users/"+this.currentRoleId,menusData).then(
                    res =>{
                        this.paramsdatacopy = [{
                            title:'人员',
                            loading: true,
                            expand: true,
                            children: []
                        }];
                    }
                ).catch(
                    res=>{
                        this.$Message.error('请求失败');
                    }
                )
                this.modal2 = false;
            },
            cancel2(){
                this.modal2 = false;this.paramsdatacopy=[{title:'人员',loading:false,children:[]}]
            },
            query(){
                this.buttonLoading=true
                let data = {}
                data.fromPage = this.pagedata.fromPage;
                data.pageSize = this.pagedata.pageSize;
                if(sessionStorage('userId').getObject('userId').companyOrgLevel == '0200100005000000000')
                    data.roleType = '1';
                else if(sessionStorage('userId').getObject('userId').companyOrgLevel == '0200100005000000001')
                    data.roleType = '2';
                else 
                    data.roleType = '3';
                this.$http.get(Api.queryRole,{params:data}).then(
                    res =>{
                        this.pagedata.total=res.data.total;
                        this.data1 = res.data.data;
                        this.buttonLoading=false
                    }
                ).catch(
                    res=>{
                        this.$Message.error('请求失败');
                    }
                )
            },
            reset(){},
            getData(){
                this.query();
            },
            loadData () {
                this.$http.get(Api.baseUrl + "/role/users/"+this.currentRoleId,{params:{}}).then((res) => {
                    this.paramsdatacopy[0].loading = false
                    this.paramsdatacopy[0].children.push(res.data.data);
                }).catch(res => {
                    this.$Message.error('请求失败');
                })
            }
        }
    }
</script>

<style lang='css' scoped>
    @import '../../../index.css';

</style>